<template>
    <div class="kw-dragging-proxy" v-bind:style="cc">
        <div class="proxy-icon">
            <i class="kw-widget-icon" :class="icon"></i>
        </div>
        <span class="proxy-name">{{text}}</span>
    </div>
</template>
<script>
    import { MOVE_START_EVENT, MOVE_EVENT, DRAG_END_EVENT } from '../common/event'
    export default {
      name: 'dragging',
      data() {
        return {
          icon: '',
          type: '',
          text: '',
          cc: {},
          isStart: false
        }
      },
      created() {
        let self = this
        this.$root.EventBus.$on(MOVE_START_EVENT, obj => {
          self.cc = Object.assign({}, self.cc, {
            display: 'none',
            top: obj.clientY + 'px',
            left: obj.clientX + 'px'
          })
          self.icon = obj.icon
          self.type = obj.type
          self.text = obj.text
          self.isStart = true
        })
        this.$root.EventBus.$on(MOVE_EVENT, obj => {
          if (!self.isStart) {
            return
          }
          let clientX = obj.clientX
          let clientY = obj.clientY
          let startX = parseInt(self.cc.left);
          let startY = parseInt(self.cc.top);
          let moveX = clientX - startX + 'px'
          let moveY = clientY - startY + 'px'
          self.cc = Object.assign({}, self.cc, {
            display: 'block',
            top: startY + 'px',
            left: startX + 'px',
            transform: 'translate3d(' + moveX + ',' + moveY + ',0)'
          })
        })
        this.$root.EventBus.$on(DRAG_END_EVENT, () => {
          self.isStart = false
          let startX = self.cc.left;
          let startY = self.cc.top;
          self.cc = Object.assign({}, self.cc, {
            display: 'none',
            top: startY + 'px',
            left: startX + 'px'
          });
          document.querySelector('html').classList.remove('kw-cursor-move');
        })
      }
    }
</script>
<style lang="less">
.kw-dragging-proxy {
  position: fixed;
  pointer-events: none;
  width: 128px;
  height: 42px;
  background: rgba(0,0,0,0.6);
  text-align: left;
  padding-left: 15px;
  font-size: 12px;
  line-height: 42px;
  color: #fff;
  margin-top: -21px;
  margin-left: -75px;
  display: none;
  .proxy-icon {
    display: inline-block;
    .kw-widget-icon {
      height: 24px;
      width: 24px;
      font-size: 24px;
      display: inline-block;
      height: 24px;
      margin-right: 5px;
      vertical-align: -4px;
    }
  }
}
.kw-dragging-mark {
  background: #ff4500;
  height: 2px;
  overflow: visible;
  position: relative;
  margin: 3px 0;
  &:before,
  &:after {
    position: absolute;
    content: '';
    display: block;
    height: 0;
    width: 0;
    border-style: solid;
    border-color: transparent;
    border-width: 4px 8px;
    top: -3px;
  }
  &:before {
    left: 0;
    border-left-color: #ff4500;
  }
  &:after {
    right: 0;
    border-right-color: #ff4500;
  }
}
</style>